import Vue from 'vue'
import notification from './notification.vue'

const notificationConstructor = Vue.extend(notification)

const instances = [];

const notify = (options) => {
    const {
        value,
        ...rest
    } = options;
    const instance = new notificationConstructor({
        el:document.createElement('div'),
        propsData:{
            value
        },
        data(){
            return{
                ...rest,
            }
        },
        computed:{
            style(){
                return{
                    position:'fixed',
                    right:'20px',
                    top:`${this.verticalOffset}px`,
                    backgroundColor:'#fff',
                }
            }
        },
        methods:{
            $removeDom(target){
                target.parentNode.removeChild(target)
            },
            $close(){
                this.$removeDom(this.$el);
            }
        }
    })
    document.body.appendChild(instance.$el);
    // 点击多次弹框叠加渲染
    instances.push(instance);
    instances.forEach(element => {
        element.verticalOffset += element.$el.offsetHeight + 32;
    });
    // 弹框Dom清除
    Vue.nextTick(()=>{
        instance.timer = setTimeout(() => {
            instance.$close()
        },2000)
    });
    return instance;
}
export default notify